<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>我要卖车</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">


    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/plugins/select2/select2.css" />
    <link rel="stylesheet" href="/plugins/select2/select2-bootstrap.css" />
    <script src="/plugins/select2/select2.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

</head>

<body class="hold-transition skin-red sidebar-mini" >
<iframe id="geoPage" width=0 height=0 frameborder=0  style="display:none;" scrolling="no"
        src="https://apis.map.qq.com/tools/geolocation?key=BV2BZ-O7UKK-55VJC-AAZJJ-L5XZZ-74FTV&referer=测试二手车-web端">
</iframe>

<!--tab内容-->
<div class="tab-content">

    <!--表单内容-->
    <div class="tab-pane active" id="home">
        <div class="row data-type">
            <div class="col-md-2 title">商品分类</div>

            <div class="col-md-10 data">
                <table>
                    <tr>
                        <td>
                            品牌：<select id="selectbrands" onchange="selectSeries(this)">
                            </select>
                        </td>
                        <td>
                            车系:<select  id="series">
                            <option>请选择</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>


            <div class="col-md-2 title">车辆名称</div>
            <div class="col-md-10 data">
                <input type="text" class="form-control" id="name"   placeholder="车辆名称" value="">
            </div>

            <div class="col-md-2 title">车辆标题</div>
            <div class="col-md-10 data">
                <input type="text" class="form-control" id="title"   placeholder="车辆标题" value="">
            </div>

            <div class="col-md-2 title">价格</div>
            <div class="col-md-10 data">
                <div class="input-group">
                    <span class="input-group-addon">¥</span>
                    <input type="text" class="form-control" id="price" placeholder="价格" value="">
                </div>
            </div>

            <div class="col-md-2 title">上牌时间</div>
            <div class="col-md-10 data">
                <input type="date" class="form-control" id="upLicensePlateTime"   placeholder="上牌时间" value="">
            </div>
            <div class="col-md-2 title">规格</div>
            <div class="col-md-10 data">
                <table>
                    <tr>
                        <td>
                            车龄：
                            <select id="age">
                            </select>
                        </td>
                        <td>
                            车型:
                            <select id="carType">
                                <option>请选择</option>
                            </select>
                        </td>
                        <td>
                            颜色:
                            <select  id="carColor">
                                <option>请选择</option>
                            </select>
                        </td>
                        <td>
                            座位数:
                            <select  id="seating">
                                <option>请选择</option>
                            </select>
                        </td>
                        <td>
                            里程:
                            <select  id="mileage">
                                <option>请选择</option>
                            </select>
                        </td>
                        <td>
                            排放标准:
                            <select id="emissionStandard">
                                <option>请选择</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="map">

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="insertTemplate()">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>

        </div>
    </div>


</div>
</body>
</html>

<script type="text/javascript">
    $(function(){
        //查询品牌
        selectbrand();

        selectSpecAge();

        selectSpecCarType();

        selectSpecColor();

        selectSpecSeating();

        selectSpecMileage();

        selectSpeceMissionStandard();

    })

    function selectbrand() {
        $.ajax({
            url : "/sellCar/getBrandInfo",
            type : "get",
            data : {},
            dataType : "json",
            async : true,
            success : function(result){
                var list = result.data;
                var html = "<option>请选择</option>";
                $(list).each(function(i,e){
                    html += "<option value='"+e["id"]+"'>"+ e["name"]+"</option>";
                    html += '</option>';
                })
                $("#selectbrands").html(html);
            },
            error :function(){
                alert("系统异常,请联系管理员");
            }
        })

    }

    //车系
    function selectSeries(obj){
        var brandId = obj.value;
        $.ajax({
            url : "/sellCar/selectByBrandId",
            type : "post",
            data : {brandId:brandId},
            dataType : "json",
            async : true,
            success : function(result){
                var list = result.data;
                var html = "<option>请选择</option>";
                $(list).each(function(i,e){
                    html += '<option value="'+e["id"]+'">'+e["name"]+'</option>';
                })
                $("#series").html(html);
            },
            error :function(){
                alert("系统异常,请联系管理员");
            }
        })
    }

    //通过规格id查询车龄
    function selectSpecAge(){
        $.ajax({
            url : "/sellCar/selectBySpecId",
            type : "post",
            data : {specId:1},
            dataType : "json",
            async : true,
            success : function(result){
                var list = result.data;
                var html = '';
                $(list).each(function(i,e){
                    html += "<option value='"+e["detailsId"]+"'>"+ e["name"]+"</option>";
                    html += '</option>';
                })
                $("#age").html(html);
            },
            error :function(){
                alert("系统异常,请联系管理员");
            }
        })
    }

    //通过规格id查询车型
    function selectSpecCarType(){
        $.ajax({
            url : "/sellCar/selectBySpecId",
            type : "post",
            data : {specId:2},
            dataType : "json",
            async : true,
            success : function(result){
                var list = result.data;
                var html = '';
                $(list).each(function(i,e){
                    html += "<option value='"+e["detailsId"]+"'>"+ e["name"]+"</option>";
                    html += '</option>';
                })
                $("#carType").html(html);
            },
            error :function(){
                alert("系统异常,请联系管理员");
            }
        })
    }

    //通过规格id查询颜色
    function selectSpecColor(){
        $.ajax({
            url : "/sellCar/selectBySpecId",
            type : "post",
            data : {specId:3},
            dataType : "json",
            async : true,
            success : function(result){
                var list = result.data;
                var html = '';
                $(list).each(function(i,e){
                    html += "<option value='"+e["detailsId"]+"'>"+ e["name"]+"</option>";
                    html += '</option>';
                })
                $("#carColor").html(html);
            },
            error :function(){
                alert("系统异常,请联系管理员");
            }
        })
    }

    //通过规格id查询座位
    function selectSpecSeating(){
        $.ajax({
            url : "/sellCar/selectBySpecId",
            type : "post",
            data : {specId:9},
            dataType : "json",
            async : true,
            success : function(result){
                var list = result.data;
                var html = '';
                $(list).each(function(i,e){
                    html += "<option value='"+e["detailsId"]+"'>"+ e["name"]+"</option>";
                    html += '</option>';
                })
                $("#seating").html(html);
            },
            error :function(){
                alert("系统异常,请联系管理员");
            }
        })
    }

    //通过规格id查询里程
    function selectSpecMileage(){
        $.ajax({
            url : "/sellCar/selectBySpecId",
            type : "post",
            data : {specId:10},
            dataType : "json",
            async : true,
            success : function(result){
                var list = result.data;
                var html = '';
                $(list).each(function(i,e){
                    html += "<option value='"+e["detailsId"]+"'>"+ e["name"]+"</option>";
                    html += '</option>';
                })
                $("#mileage").html(html);
            },
            error :function(){
                alert("系统异常,请联系管理员");
            }
        })
    }

    //通过规格id查询排放标准
    function selectSpeceMissionStandard(){
        $.ajax({
            url : "/sellCar/selectBySpecId",
            type : "post",
            data : {specId:11},
            dataType : "json",
            async : true,
            success : function(result){
                var list = result.data;
                var html = '';
                $(list).each(function(i,e){
                    html += "<option value='"+e["detailsId"]+"'>"+ e["name"]+"</option>";
                    html += '</option>';
                })
                $("#emissionStandard").html(html);
            },
            error :function(){
                alert("系统异常,请联系管理员");
            }
        })
    }


    var loc2 = null;
    window.addEventListener('message', function(event) {
        // 接收位置信息
        var loc = event.data;
        var map = document.getElementById("map");
        loc2 = JSON.stringify(loc);
        map.innerHTML = loc2;
    }, false);
    console.log(loc2);

    //增加
    function insertTemplate() {
        var brandId = $("#selectbrands").val();
        console.log(brandId);
        var carSeriesId = $("#series").val();
        console.log(carSeriesId);
        var name = $("#name").val();
        var title = $("#title").val();
        var price = $("#price").val();
        var upLicensePlateTime = $("#upLicensePlateTime").val();
        var age = $("#age").val();
        var carType = $("#carType").val();
        var carColor = $("#carColor").val();
        var mileage = $("#mileage").val();
        var seating = $("#seating").val();
        var emissionStandard = $("#emissionStandard").val();
       var detailsId = age+carType+carColor+seating+mileage+emissionStandard;
       console.log(detailsId);
        $.ajax({
            url : "/sellCar/saveCar",
            type : "post",
            contentType: 'application/json; charset=UTF-8',
            data :  JSON.stringify({
                name:name,title:title,price:price,
                brandId:brandId,carSeriesId:carSeriesId,
                detailsId:detailsId,
                upLicensePlateTime:upLicensePlateTime,lenLat:loc2
            }),
            dataType : "json",
            async : true,
            success : function(result){
                if(result.code == 200){
                    //window.location.reload();
                    alert("信息完善成功");
                }
            },
            error :function(){
                alert("系统异常,请联系管理员");
            }
        })
    }

</script>